<template>
  <div style="padding-top: 10px">
    <h3 style="margin-left: 10px">新增报告</h3>
    <div style="width: 80%; margin-top: 10px">
      <el-form ref="form" label-width="100px" :model="form">
        <el-form-item label="项目分组">
          <el-select v-model="form.method_id">
            <el-option
              v-for="(item, index) of methodList"
              :key="index"
              :label="item.method_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查项目">
          <el-input v-model="form.report_name" />
        </el-form-item>
        <el-form-item label="项目价格">
          <el-input v-model="form.goods_price" />
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="form.goods_cost" />
        </el-form-item>

        <el-form-item v-if="obj.id != null" label="是否启用">
          <el-radio-group v-model="form.is_del">
            <el-radio label="N">启用</el-radio>
            <el-radio label="Y">暂停</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="添加检查项">
          <el-button @click="add">添加检查项</el-button>
        </el-form-item>
        <div v-if="tableData.length != 0">
          <table class="tftable" style="width: 98%">
            <thead>
              <tr>
                <td colspan="1">检查项目</td>
                <td colspan="1">编码</td>
                <td colspan="1">输入类型</td>
                <td colspan="1">默认值</td>
                <td colspan="1">单位</td>
                <td colspan="1">操作</td>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(items, index) in tableData" :key="index">
                <td>{{ items.item_name }}</td>
                <td>{{ items.item_code }}</td>
                <td>{{ items.item_type }}</td>
                <td>{{ items.default_value }}</td>
                <td>{{ items.unit }}</td>

                <td>
                  <el-button type="danger" @click.prevent="deletes(index)">
                    删除
                  </el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-form-item label="添加耗材">
          <el-button @click="addConsumables">添加耗材</el-button>
        </el-form-item>
        <div v-if="tableData1.length != 0">
          <table class="tftable" style="width: 98%">
            <thead>
              <tr>
                <td colspan="1">耗材</td>
                <td colspan="1">数量</td>
                <td colspan="1">操作</td>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(items, index) in tableData1" :key="index">
                <td>
                  <!-- @change="selectChaneg" -->
                  <el-select v-model="items.attr_id" placeholder="请选择">
                    <el-option
                      v-for="(item, k) in options"
                      :key="k"
                      :label="item.goods_name"
                      :value="item.goods_attr_id"
                      @click.native="selectChaneg(index, k)"
                    />
                  </el-select>
                </td>
                <td><el-input v-model="items.goods_num" /></td>
                <td>
                  <el-button type="danger" @click.prevent="deletese(index)">
                    删除
                  </el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        :before-close="handleClose"
        title="检查项"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <el-form ref="form" label-width="80px" :model="forms">
          <el-form-item label="名称">
            <el-input v-model="forms.item_name" />
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="forms.item_code" />
          </el-form-item>

          <el-form-item label="输入类型">
            <el-radio-group v-model="forms.item_type">
              <el-radio label="input_str">文字</el-radio>
              <el-radio label="input_num">数字</el-radio>
              <el-radio label="input_flie">上传文件</el-radio>
              <el-radio label="input_text">长文字</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            v-if="
              forms.item_type == 'input_str' || forms.item_type == 'input_num'
            "
            label="默认值"
          >
            <el-input v-model="forms.default_value" />
          </el-form-item>

          <el-form-item
            v-if="
              forms.item_type == 'input_str' || forms.item_type == 'input_num'
            "
            label="参考值添加"
          >
            <div style="display: flex">
              <el-input
                v-model="formInline.label"
                placeholder="标题"
                style="width: 50%"
              />
              <el-select v-model="formInline.type" placeholder="类型">
                <el-option label="最小值" value="min" />
                <el-option label="最大值" value="max" />
                <el-option label="输入框" value="input" />
              </el-select>
              <el-button type="primary" @click="addSubmit">添加</el-button>
            </div>
          </el-form-item>
          <div
            v-if="
              forms.item_type == 'input_str' || forms.item_type == 'input_num'
            "
          >
            <el-form-item
              v-for="(items, index) in forms.item_scope"
              :key="index"
              :label="items.label"
            >
              <el-input v-model="items.value" style="width: 80%" />
              <el-button type="danger" @click="deleteForm">删除</el-button>
            </el-form-item>
          </div>

          <el-form-item
            v-if="
              forms.item_type != 'input_flie' && forms.item_type != 'input_text'
            "
            label="单位"
          >
            <el-input v-model="forms.unit" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addInspection">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getGoodsList } from '@/api/public'
  import { getCommodityType } from '@/api/commodityType'
  import { reportAdd, reportDetail } from '@/api/template'

  export default {
    props: {
      obj: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        methodList: [],
        form: {
          method_id: '',
          report_name: '',
          goods_price: '',
          goods_cost: '',
          is_print: 'Y',
        },
        options: [],
        tableData: [],
        tableData1: [],
        dialogVisible: false,
        innerVisible: false,
        forms: {
          item_code: '',
          item_name: '',
          item_type: '',
          default_value: '',
          unit: '',
          item_scope: [],
        },
        formInline: {
          label: '',
          type: '',
        },
      }
    },
    mounted() {
      if (this.obj.id) {
        reportDetail(this.obj).then((e) => {
          this.tableData1 = e.data.report_goods
          this.tableData = e.data.report_item
          this.form = {
            method_id: e.data.method_id || '',
            report_name: e.data.report_name,
            goods_cost: e.data.goods_cost,
            goods_price: e.data.goods_price,
            is_print: e.data.is_print,
            is_del: e.data.is_del,
          }
        })
        console.log(this.obj)
      }
      this.init()
    },
    beforeMount() {},
    methods: {
      init() {
        const data = {
          goods_type: 'entity',
        }
        getGoodsList(data).then((e) => {
          this.options = e.data
        })
        this.getGoodsType()
      },
      getGoodsType() {
        this.methodList = []
        const data = {
          // type_id: 6,
          type_code: 'report',
        }
        getCommodityType(data).then((res) => {
          res.data.data.forEach((e) => {
            if (e.type_id == 6) {
              this.methodList.push(e)
            }
          })
        })
      },
      onSubmit() {
        for (let i in this.tableData) {
          this.tableData[i].item_sort = i
        }
        console.log(this.tableData)
        const report_item = JSON.stringify(this.tableData)
        const report_goods = JSON.stringify(this.tableData1)
        this.form.report_item = report_item
        this.form.report_goods = report_goods
        if (this.obj.id) {
          this.form.id = this.obj.id
        }
        reportAdd(this.form).then(() => {
          this.goBack()
        })
      },
      addSubmit() {
        if (this.formInline.label != '' && this.formInline.type != '') {
          this.forms.item_scope.push({
            label: this.formInline.label,
            type: this.formInline.type,
            value: '',
          })
          this.formInline.label = ''
          this.formInline.type = ''
          this.innerVisible = false
        }
      },
      // 添加检查项
      addInspection() {
        const obj = JSON.parse(JSON.stringify(this.forms))
        this.tableData.push(obj)
        this.dialogVisible = false
      },
      add() {
        this.dialogVisible = true
        this.forms = {
          item_code: '',
          item_name: '',
          item_type: '',
          default_value: '',
          unit: '',
          item_scope: [],
        }
        this.formInline = {
          label: '',
          type: '',
        }
      },
      deletes(index) {
        this.tableData.splice(index, 1)
      },
      deletese(index) {
        this.tableData1.splice(index, 1)
      },
      deleteForm(index) {
        this.forms.item_scope.splice(index, 1)
      },
      addConsumables() {
        this.tableData1.push({
          goods_id: '',
          attr_id: '',
          goods_num: '',
          name: '',
        })
      },
      selectChaneg(i, k) {
        console.log(i, k)
        this.tableData1[i].goods_id = this.options[k].goods_id
        // this.tableData1[i].attr_id = this.options[k].goods_attr_id
      },
      goBack() {
        this.$emit('showMain', 0)
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .sort-move {
    transition: transform 1s;
  }

  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse;
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 1%;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    // background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
